{extend name="index_layout"/}
{block name="main"}
<!--    <div class="layui-body">-->
<div class="layui-container">
    <div class="layui-card">
        <div class="layui-card-header">预约基本信息 <span
                style="float: right;color: #01aaed;font-size: 16px; margin-right: 20px;cursor: pointer"
                onclick="window.history.go(-1);">返回</span></div>
        <div class="layui-card-body">
            <p><strong>预约ID：</strong> {$data.id}</p>
            <p><strong>用户昵称：</strong> {$data.staff.name}</p>
            <p><strong>用户手机号：</strong> {$data.staff.phone}</p>
            <p><strong>预约区域：</strong> {$data.area.name}</p>
            <p><strong>车辆编号：</strong> {$data.car.number}</p>
            <p><strong>区域负责人：</strong> {$data.admin_name}</p>
        </div>
    </div>

    <div class="layui-card">
        <div class="layui-card-header">预约详情</div>
        <table class="layui-table">
            <thead>
            <tr>
                <th>用户ID</th>
                <th>用户昵称</th>
                <th>预约时间</th>
                <th>取车时间</th>
                <th>用车时长</th>
                <th>预计归还时间</th>
                <th>实际归还时间</th>
                <th>创建时间</th>
            </tr>
            </thead>
            <tbody>
            <tr>
                <td>{$data.staff.id}</td>
                <td>{$data.staff.name}</td>
                <td>{$data.makeTime|date='Y-m-d H:i:s'}</td>
                <td>{$data.getCarTime ? date('Y-m-d H:i:s', $data.getCarTime) : '-'}</td>
                <td>{$data.makeCarTime}</td>
                <td>{$data.returnTime ? date('Y-m-d H:i:s', $data.returnTime) : '-'}</td>
                <td>{$data.returnCarTime ? date('Y-m-d H:i:s', $data.returnCarTime) : '-'}</td>
                <td>{$data.createTime}</td>
            </tr>
            <!-- 其他商品信息 -->
            </tbody>
        </table>
    </div>


    <div class="layui-card">
        <div class="layui-card-header">其他信息</div>
        <div class="layui-card-body">
            <p><strong>二维码：</strong>
                <img style="width: 80px;height: 80px;margin-left: 20px;margin-bottom: 10px"
                     src="data:image/png;base64,{$data.qrcode}" alt="">
            </p>
            <br>
            <p><strong>当前状态：</strong><span style="margin-left: 20px;font-size: 16px" class="layui-btn layui-btn-xs">{$data.status.value}</span>

            </p>
            <br>
            {if condition="$data['timeOut']"}
            <p>
                <span style="color: red">已超时{$data.timeOut}</span>
            </p>
            {/if}
            <br>
        </div>
    </div>
</div>
<!--    </div>-->

<script src="https://cdn.jsdelivr.net/npm/layui-src/dist/layui.all.js"></script>
<script>
    layui.use(['element'], function () {
        var element = layui.element;
    });
</script>


{/block}
{block name="script"}
<script type="text/javascript">
    layui.use('yznForm', function () {
        var yznForm = layui.yznForm;
        yznForm.bindevent($("form.layui-form"));
    });
</script>
{/block}